import { Card, Table } from 'antd'
import React, { useEffect, useState } from 'react'
import type { TableColumnsType } from 'antd';
import { getDistrictList } from '@/api/hospital/hospitalList';
import { IDistrictList } from '@/api/hospital/model/hospitalListType';
import { DownOutlined, RightOutlined } from '@ant-design/icons';

export default function Dict() {
    const columns:TableColumnsType<any>= [
      {
        title: '名称',
        dataIndex: 'name'
      },
      {
        title: '编码',
        dataIndex: 'dictCode'
      },
      {
        title: '值',
        dataIndex: 'value'
      },
      {
        title: '创建时间',
        dataIndex: 'createTime'
      }
    ]
    // 定义状态数据
    let [dictList , setDictList] = useState<IDistrictList>([])
    const getDictList = async() => {
      let dictList = await getDistrictList(1)
      // console.log('数据字典数据', dictList);
            
      setDictList(dictList)
      
    }
    useEffect(() => {
      getDictList()
    }, [])
  return (
    <div>
        <Card>
            <Table
                pagination={false}
                rowKey={'id'}
                columns={columns}
                dataSource={dictList}
                expandable={{
                  expandIcon:({expanded,onExpand,record}) => {
                    if(!record.hasChildren) return <div style={{width: 15,display:'inline-block'}}></div>
                    return expanded? (
                      <DownOutlined onClick = {e => onExpand(record, e)} /> ):
                      <RightOutlined onClick= {async e => {
                        // 获取当前行记录的子节点，加入record， 进行展开
                        console.log(record);
                        if(!record.children?.length){
                          // record中没有children属性 / record中children的数组长度为0
                           // 根据当前行id获取子节点的数据
                          let children= await getDistrictList(record.id)
                          record.children = children
                        }
                        onExpand(record,e)
                      }} />
                  }
                }}
            />
        </Card>
    </div>
  )
}
